<template>
  <div>
    <Header></Header>
    <div class="form-wrap">
      <el-form ref="form" :model="form" label-width="130px">
        <el-form-item label="门店名称">
          <el-input v-model="form.shopname"></el-input>
        </el-form-item>
        <el-form-item label="门店LOGO">
          <div class="logo">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false">
              <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <span class="tips-click">点击图片上传新的LOGO</span>
          </div>
        </el-form-item>
        <el-form-item label="外卖电话">
          <el-input v-model="form.phoneNum"></el-input>
        </el-form-item>
        <el-form-item label="联系人姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话">
          <el-input v-model="form.userPhoneNum"></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select v-model="form.province" placeholder="请选择省份">
            <el-option label="广东省" value="gd"></el-option>
            <el-option label="北京市" value="bj"></el-option>
          </el-select>
          <el-select v-model="form.city" placeholder="请选择市">
            <el-option label="广州市" value="gz"></el-option>
            <el-option label="北京" value="bj"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="详细店铺地址">
          <el-input v-model="form.shopAddress"></el-input>
        </el-form-item>
        <el-form-item label="附近学校">
          <el-input v-model="form.school"></el-input>
        </el-form-item>
        <el-form-item label="门店分类">
          <el-select v-model="form.classify" placeholder="请选择门店分类">
            <el-option label="小吃" value="snack"></el-option>
            <el-option label="正餐" value="dinner"></el-option>
            <el-option label="夜宵" value="midnightsnack"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="营业时间">
          <el-time-select
            placeholder="起始时间"
            v-model="form.startTime"
            :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30'
          }">
          </el-time-select>
          <el-time-select
            placeholder="结束时间"
            v-model="form.endTime"
            :picker-options="{
            start: '08:30',
            step: '00:15',
            end: '18:30',
            minTime: form.startTime
          }">
          </el-time-select>
        </el-form-item>
        <el-form-item label="经营类型">
          <el-radio-group v-model="form.runType">
            <el-radio label="1">餐饮类</el-radio>
            <el-radio label="2">非餐饮类</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="联系人身份证正面">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="3"
            :file-list="file1">
            <el-button type="primary">上传身份证正面<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="联系人身份证反面">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="3"
            :file-list="file2">
            <el-button type="primary" plain>上传身份证反面<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="营业执照">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="3"
            :file-list="file3">
            <el-button type="primary">上传营业执照<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="卫生许可证" v-if="form.runType==1">
          <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            :limit="3"
            :file-list="file4">
            <el-button type="primary" plain>上传卫生许可证<i class="el-icon-upload el-icon--right"></i></el-button>
          </el-upload>
        </el-form-item>
        <el-form-item>
          <el-button type="success" @click="onSubmit" round>提交申请</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Header from '@/components/Common/Header'
export default {
  name: 'UpdateShopData',
  data () {
    return {
      form: {
        shopname: '',
        phoneNum: '',
        name: '',
        userPhoneNum: '',
        shopAddress: '',
        school: '',
        startTime: '',
        endTime: '',
        province: '',
        city: '',
        runType: '1',
        imageUrl: 'https://ss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=1804258733,476021765&fm=58'
      },
      file1: [],
      file2: [],
      file3: [],
      file4: []
    }
  },
  methods: {
    onSubmit () {
      console.log('submit!')
    }
  },
  components: {
    Header
  }
}
</script>

<style lang="stylus" scoped>
  @import "../assets/css/base.styl"
  .form-wrap
    width: $width
    margin 0 auto
    .el-form-item
      position: relative
      img
        width: 90px
        height: 90px
      .tips-click
        position: absolute
        left 130px
        top: 28px
        color: #999
        padding: 0
    .el-form
      width: 700px
      margin: 10px auto
</style>
